<template>
	<view class="viplist">
		<!-- #ifdef APP-PLUS -->
		<Hearder :name="'空间会员'"></Hearder>
		<!-- #endif -->
		<view class="searchBox">
			<view class="search">
				<u-icon name="search" color="#ccc" size="26"></u-icon>
				<input type="text" placeholder="请输入会员账号" placeholder-style="color:#ccc;" v-model="search"/>
				<view class="box_search" @click="btnsearch">搜索</view>
			</view>
		</view>
		<view class="list-con">
			<view class="every" v-for="item in hylist" :key="item.member_id" @click="toPage('vipdetail?member_id='+item.member_id)">
				<view class="clearfix">
					<image :src="item.avatarUrl"></image>
					<view>
						<view>
							{{item.nickName}}
							<text v-if="item.disabled==10">(开启)</text>
							<text v-if="item.disabled==20">(禁用)</text>
						</view>
						<view>{{item.phone}}</view>
					</view>
				</view>
				<view>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view class="nidata" v-if="hylist.length==0">
			<image src="../../static/images/noimg.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				search:'',
				space_id:'',
				hylist:[]
			}
		},
		onLoad(options) {
			this.space_id = options.space_id
			this.getinit()
		},
		methods:{
			getinit(){
				this.request('/space/getMemberList',{space_id:this.space_id}).then(res => {
					if(res.data.code==1){
						this.hylist = res.data.data
					}
				})
			},
			btnsearch(){
				this.request('/search/getMember',{phone:this.search,type:1}).then(res => {
					if(res.data.code==1){
						this.hylist = res.data.data
					}else{
						this.$tip(res.data.msg)
					}
				})
			},
			toPage(route){
				uni.navigateTo({
				    url: route
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.viplist{
		.searchBox{
			position: fixed;
			top: 160rpx;
			/* #ifdef H5 */
			top: 0;
			/* #endif */
			width: 100%;
			background: #fff;
			z-index: 9;
			.search{
				display: flex;
				align-items: center;
				margin: 20rpx 3%;
				height: 60rpx;
				background: $uni-background-color;
				border-radius: 6rpx;
				.u-icon{
					margin: 0 14rpx;
					top: 0;
				}
				input{
					width: 82%;
					font-size: 24rpx;
				}
				.box_search{
					width: 18%;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					margin: 10rpx 0;
					font-size: 28rpx;
				}
			}
		}
		.list-con{
			margin-top: 240rpx;
			/* #ifdef H5 */
			margin-top: 80rpx;
			/* #endif */
			.every{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 4%;
				border-bottom: 1rpx solid #eee;
				padding: 30rpx 0;
				>view{
					image{
						float: left;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					>view{
						float: left;
						margin-left: 18rpx;
						view{
							font-size: 28rpx;
							text{
								font-size: 28rpx;
								color: $uni-text-color;
							}
							&:last-of-type{
								font-size: 24rpx;
								color: #999;
								margin-top: 12rpx;
							}
						}
					}
				}
			}
		}
	}
</style>